<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="结算银行账户" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="bankCardBox">
			<view class="bankCard">
				<text class="type">对私账户</text>
				<text class="bankName">中国建设银行</text>
				<text class="cardNo">**** **** **** *** 8479</text>
			</view>
			<button class="changeTie">申请换绑</button>
		</view>
		<view class="tipsBox">
			<text class="title">申请记录</text>
			<text class="info">若审核中状态无法正常结算，请联系客服处理</text>
		</view>
		<view class="contentBox">
			<view class="noData" v-if="false">
				<image src="../../../static/images/order-noData.png"></image>
				<text>暂无数据~</text>
			</view>
			<view class="tableData">
				<view class="itemBox">
					<text class="time">2025年01月22日 09:40:40</text>
					<text class="state audit">审核中</text>
					<text class="swapBank">换绑银行：中国建设银行</text>
					<text class="swapNumber">换绑卡号：**** **** **** *** 5856</text>
				</view>
				<view class="itemBox">
					<text class="time">2025年01月22日 09:40:40</text>
					<text class="state succeed">换绑成功</text>
					<text class="swapBank">换绑银行：中国建设银行</text>
					<text class="swapNumber">换绑卡号：**** **** **** *** 5856</text>
				</view>
				<view class="itemBox">
					<text class="time">2025年01月22日 09:40:40</text>
					<text class="state fail">换绑失败</text>
					<text class="swapBank">换绑银行：中国建设银行</text>
					<text class="swapNumber">换绑卡号：**** **** **** *** 5856</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.bankCardBox{
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		.bankCard{
			width: 93%;
			height: 250rpx;
			margin-top: 10rpx;
			float: left;
			margin-left: 3.5%;
			background-color: rgb(250, 228, 158);
			border-radius: 20rpx;
			.type{
				width: auto;
				float: right;
				height: 45rpx;
				line-height: 45rpx;
				padding: 0rpx 30rpx;
				background-color: #ffbc04;
				font-size: 24rpx;
				border-radius: 45rpx 0rpx 45rpx 0rpx;
			}
			.bankName{
				width: 90%;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				float: left;
				margin-top: 20rpx;
				margin-left: 5%;
				color: #333636;
			}
			.cardNo{
				width: 90%;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 50rpx;
				float: left;
				margin-left: 5%;
				z-index: 3;
				margin-top: 31rpx;
				position: relative;
				color: #333636;
			}
		}
		.bankCard:before{
			content: '';
			width: 90rpx;
			height: 90rpx;
			background-color: #feda79;
			border-radius: 50%;
			position: absolute;
			float: right;
			margin-top: 125rpx;
			right:9%;
			z-index: 2;
		}
		.bankCard::after{
			content: '';
			width: 90rpx;
			height: 90rpx;
			background-color: #fed152;
			border-radius: 50%;
			position: absolute;
			float: right;
			margin-top: 125rpx;
			right:18.5%;
			z-index: 2;
		}
		.changeTie{
			width: 90%;
			height: 90rpx;
			margin-top: 25rpx;
			line-height: 90rpx;
			float: left;
			margin-left: 5%;
			background-color: #ffc000;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
		}
		.changeTie::after{
			border:none
		}
	}
	.bankCardBox:before{
		content: '';
		width: 93%;
		margin-left: 3.5%;
		height: 1rpx;
		float: left;
		position: absolute;
		background-color: #f5f5f5;
		margin-top: 399rpx;
	}
	.tipsBox{
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		.title{
			width: 90%;
			height: 40rpx;
			margin-top: 25rpx;
			line-height: 40rpx;
			float: left;
			margin-left: 5%;
			font-size: 34rpx;
			font-weight: bold;
			color: rgb(57, 57, 57);
		}
		.info{
			width: 90%;
			height: 40rpx;
			margin-top: 5rpx;
			line-height: 40rpx;
			float: left;
			margin-left: 5%;
			font-size: 26rpx;
			color: rgb(162, 162, 162);
		}
	}
	.contentBox{
		width: 100%;
		position: absolute;
		top: 720rpx;
		bottom: 0rpx;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 350rpx;
				height: 350rpx;
				margin-top: 200rpx;
				position: relative;
				left: 50%;
				margin-left: -175rpx;
			}
			text{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				float: left;
				font-size: 30rpx;
				font-weight: bold;
				color: #333132;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			background-color: #fff;
			.itemBox{
				width: 90%;
				float: left;
				margin-left: 5%;
				height: 180rpx;
				font-size: 27rpx;
				color: rgb(59, 59, 59);
				border-bottom: 1rpx solid #f5f5f5;
				.time{
					width: 80%;
					float: left;
					height: 50rpx;
					line-height: 50rpx;
					margin-top:15rpx ;
				}
				.state{
					width: 20%;
					float: right;
					height: 50rpx;
					line-height: 50rpx;
					text-align: right;
					margin-top:15rpx ;
				}
				.audit{
					color: rgb(209,137,81);
				}
				.succeed{
					color: rgb(87,165,130);
				}
				.fail{
					color: firebrick;
				}
				.swapBank,.swapNumber{
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					float: left;
				}
			}
		}
	}
</style>